//获取本地数据
function getData(name) {
    var local = localStorage.getItem(name);
    if (local != null) {
        return JSON.parse(local);
    } else {
        return [];
    }
}

//添加本地数据
function saveData(data) {
    localStorage.setItem('userPage', JSON.stringify(data));

}


load();
function load() {
    var data = getData("payDetail");
    console.log(data);
    var seat = getData("seat");


    //加载页面
    addElement(data, seat);



    //确认购买按钮
    $('#btn').click(function () {
        //添加时间数据
        var date = new Date().toLocaleString();
        console.log(date);
        data.date = date;
        //添加属性
        data.totalPrice = data.clickPrice * seat.length;
        data.amount = seat.length;

        //添加本地user数据
        var local = getData('userPage');
        if (local.length > 0) {
            local.push(data);
            saveData(local);
        } else {
            var arr = [];
            arr.push(data);
            saveData(arr);
        }

        // console.log(data);
        // console.log(seat);
        location.href = '../html/user.html';
    })


}
time();
//支付页面定时
function time() {
    setTimeout(() => {
        clearInterval(timer);
        $('#btn').text(`购买超时`);
        $('#btn').css('background-color', 'gray');
        $('#btn').click(function () {
            location.href = 'chooseSeat.html';
        })
    }, 10000);
    var s = 10;
    var timer = setInterval(() => {
        s--;
        $('#btn').text(`确认购买 ${s}s`);
    }, 1000);
}

$('#pay-method div').click(function () {
    $(this).css('border', '2px solid blue');
    $(this).siblings().css('border', '');
})


//加载页面
function addElement(e, s) {
    //处理总价
    var totalPrice = e.clickPrice * s.length;

    $('#goods table').append(`<tbody>
    <tr>
        <td>
            <img src="${e.img_src}"
                alt="">
        </td>
        <td>
            <p>${e.good_name}</p>
            <p>${e.play_time}</p>
            <p>${e.place}</p>
        </td>
        <td id='seatInfor'></td>
        <td>${e.clickPrice}</td>
        <td>${s.length}</td>
        <td>0.00</td>
        <td>${totalPrice}</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>实付：<span>${totalPrice}</span></td>
    </tr>

</tfoot>`)
    // 处理座位 
    s.forEach(o => {
        $('#seatInfor').append(`<p>${o.row}排${o.col}座</p>`);
    });

}

